import React, { useEffect, useState } from 'react';

interface CelebrationAnimationProps {
  score: number;
  wpm: number;
  accuracy: number;
  completionTime: number;
  onComplete?: () => void;
}

const CelebrationAnimation: React.FC<CelebrationAnimationProps> = ({
  score,
  wpm,
  accuracy,
  completionTime,
  onComplete
}) => {
  const [showAnimation, setShowAnimation] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShowAnimation(false);
      onComplete?.();
    }, 5000);

    return () => clearTimeout(timer);
  }, [onComplete]);

  useEffect(() => {
    // 添加CSS动画样式
    const style = document.createElement('style');
    style.textContent = `
      @keyframes confettiFall {
        0% {
          transform: translateY(-100vh) rotate(0deg);
          opacity: 1;
        }
        100% {
          transform: translateY(100vh) rotate(720deg);
          opacity: 0;
        }
      }
      
      @keyframes bounce {
        0%, 20%, 60%, 100% {
          transform: translateY(0) scale(1);
        }
        40% {
          transform: translateY(-30px) scale(1.1);
        }
        80% {
          transform: translateY(-15px) scale(1.05);
        }
      }
      
      @keyframes pulse {
        0% {
          transform: scale(1);
          opacity: 0.8;
        }
        50% {
          transform: scale(1.2);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 0.8;
        }
      }
      
      @keyframes firework {
        0% {
          transform: scale(0);
          opacity: 1;
        }
        50% {
          transform: scale(1);
          opacity: 0.8;
        }
        100% {
          transform: scale(1.5);
          opacity: 0;
        }
      }
    `;
    document.head.appendChild(style);
    
    return () => {
      document.head.removeChild(style);
    };
  }, []);

  if (!showAnimation) return null;

  // 生成彩色纸屑
  const confetti = Array.from({ length: 50 }, (_, i) => ({
    id: i,
    color: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7', '#dda0dd', '#98d8c8'][Math.floor(Math.random() * 7)],
    size: Math.random() * 10 + 5,
    left: Math.random() * 100,
    delay: Math.random() * 2,
    duration: Math.random() * 3 + 2
  }));

  // 生成烟花效果
  const fireworks = Array.from({ length: 8 }, (_, i) => ({
    id: i,
    top: Math.random() * 60 + 10,
    left: Math.random() * 80 + 10,
    delay: Math.random() * 3
  }));

  // 生成星星效果
  const stars = Array.from({ length: 12 }, (_, i) => ({
    id: i,
    top: Math.random() * 80 + 10,
    left: Math.random() * 90 + 5,
    delay: Math.random() * 2,
    emoji: ['⭐', '🌟', '✨', '💫'][Math.floor(Math.random() * 4)]
  }));

  // 根据成绩选择祝贺语
  const getCongratulationMessage = () => {
    if (score >= 500 && wpm >= 30 && accuracy >= 95) {
      return { main: '🏆 完美表现！', sub: '你是真正的打字大师！', color: '#ffd700' };
    } else if (score >= 300 && wpm >= 20 && accuracy >= 90) {
      return { main: '🎉 太棒了！', sub: '你的进步非常显著！', color: '#ff6b6b' };
    } else if (score >= 150 && accuracy >= 85) {
      return { main: '👏 很好！', sub: '继续保持，越来越棒！', color: '#4ecdc4' };
    } else {
      return { main: '💪 不错的开始！', sub: '多练习会更好！', color: '#45b7d1' };
    }
  };

  const message = getCongratulationMessage();

  const celebrationContainerStyle: React.CSSProperties = {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    pointerEvents: 'none',
    zIndex: 9999,
    overflow: 'hidden',
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    backdropFilter: 'blur(5px)'
  };

  const congratulationTextStyle: React.CSSProperties = {
    position: 'absolute',
    top: '20%',
    left: '50%',
    transform: 'translateX(-50%)',
    textAlign: 'center',
    animation: 'bounce 1s ease-out',
    width: 'auto',
    maxWidth: '800px',
    padding: '0 5%'
  };

  return (
    <div style={celebrationContainerStyle}>
      {/* 彩色纸屑 */}
      {confetti.map((piece) => (
        <div
          key={piece.id}
          style={{
            position: 'absolute',
            width: `${piece.size}px`,
            height: `${piece.size}px`,
            backgroundColor: piece.color,
            left: `${piece.left}%`,
            top: '-10px',
            borderRadius: Math.random() > 0.5 ? '50%' : '0%',
            animation: `confettiFall ${piece.duration}s linear ${piece.delay}s infinite`
          }}
        />
      ))}

      {/* 烟花效果 */}
      {fireworks.map((firework) => (
        <div
          key={firework.id}
          style={{
            position: 'absolute',
            top: `${firework.top}%`,
            left: `${firework.left}%`,
            width: '100px',
            height: '100px',
            borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(255,215,0,0.8) 0%, rgba(255,69,0,0.6) 50%, rgba(255,20,147,0.4) 100%)',
            animation: `firework 1.5s ease-out ${firework.delay}s`,
            boxShadow: '0 0 50px rgba(255,215,0,0.8)'
          }}
        />
      ))}

      {/* 星星效果 */}
      {stars.map((star) => (
        <div
          key={star.id}
          style={{
            position: 'absolute',
            top: `${star.top}%`,
            left: `${star.left}%`,
            fontSize: '3rem',
            animation: `pulse 2s ease-in-out ${star.delay}s infinite`,
            transform: 'translateX(-50%) translateY(-50%)'
          }}
        >
          {star.emoji}
        </div>
      ))}

      {/* 恭喜文字 */}
      <div style={congratulationTextStyle}>
        <h1 
          style={{
            fontSize: '4rem',
            fontWeight: 'bold',
            color: message.color,
            textShadow: '3px 3px 6px rgba(0,0,0,0.3)',
            marginBottom: '16px',
            fontFamily: '"Comic Sans MS", cursive, sans-serif'
          }}
        >
          {message.main}
        </h1>
        <h4 
          style={{
            fontSize: '2rem',
            fontWeight: 'bold',
            color: '#333',
            textShadow: '2px 2px 4px rgba(0,0,0,0.2)',
            marginBottom: '24px',
            fontFamily: '"Comic Sans MS", cursive, sans-serif'
          }}
        >
          {message.sub}
        </h4>
        
        {/* 成绩展示 */}
        <div 
          style={{
            backgroundColor: 'rgba(255,255,255,0.9)',
            borderRadius: '20px',
            padding: '20px',
            boxShadow: '0 8px 32px rgba(0,0,0,0.1)',
            border: `3px solid ${message.color}`
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'center', gap: '24px', flexWrap: 'wrap' }}>
            <div style={{ textAlign: 'center', minWidth: '100px' }}>
              <h3 style={{ color: message.color, fontWeight: 'bold', fontSize: '2rem', margin: '0 0 8px 0' }}>
                {score}
              </h3>
              <div style={{ color: '#666', fontSize: '1rem' }}>
                总分
              </div>
            </div>
            <div style={{ textAlign: 'center', minWidth: '100px' }}>
              <h3 style={{ color: message.color, fontWeight: 'bold', fontSize: '2rem', margin: '0 0 8px 0' }}>
                {wpm}
              </h3>
              <div style={{ color: '#666', fontSize: '1rem' }}>
                WPM
              </div>
            </div>
            <div style={{ textAlign: 'center', minWidth: '100px' }}>
              <h3 style={{ color: message.color, fontWeight: 'bold', fontSize: '2rem', margin: '0 0 8px 0' }}>
                {accuracy}%
              </h3>
              <div style={{ color: '#666', fontSize: '1rem' }}>
                准确率
              </div>
            </div>
            <div style={{ textAlign: 'center', minWidth: '100px' }}>
              <h3 style={{ color: message.color, fontWeight: 'bold', fontSize: '2rem', margin: '0 0 8px 0' }}>
                {completionTime}s
              </h3>
              <div style={{ color: '#666', fontSize: '1rem' }}>
                完成时间
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CelebrationAnimation;